<!-- pages/MyPage.vue -->
<template>
  <div class="container mx-auto p-4">
    <h2 class="text-xl font-bold mb-4">用户列表</h2>
    
    <!-- 使用插槽自定义行样式 -->
    <MyTable :data="userData" :columns="userColumns" bordered>
      <template #default="{ row, index }">
        <tr 
          :key="index"
          :class="[
            row.status === 'active' ? 'bg-green-50' : 'bg-gray-50',
            'hover:bg-gray-100 transition-colors',
            'border-b border-gray-300' // 手动补全底部边框
          ]"
        >
          <td class="px-4 py-3 border-t border-gray-300 text-left">
            {{ row.name }}
          </td>
          <td class="px-4 py-3 border-t border-gray-300 text-center">
            {{ row.age }}
          </td>
          <td class="px-4 py-3 border-t border-gray-300 text-right">
            <span 
              :class="[
                row.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800',
                'px-2 py-1 rounded-full text-xs font-medium inline-block'
              ]"
            >
              {{ row.status }}
            </span>
          </td>
        </tr>
      </template>
    </MyTable>
  </div>
</template>

<script setup>
import MyTable from '@/components/MyTable'

const userData = [
  { id: 1, name: '张三', age: 28, status: 'active' },
  { id: 2, name: '李四', age: 32, status: 'inactive' },
  { id: 3, name: '王五', age: 45, status: 'active' }
]

const userColumns = [
  { key: 'name', title: '姓名', width: 120, align: 'left' },  
  { key: 'age', title: '年龄', width: 80, align: 'center' }, 
  { key: 'status', title: '状态', align: 'right' }           
]
</script>

<style scoped>
/* 若需要覆盖默认条纹样式，可保留或调整 */
.striped tr:nth-child(odd) {
  background-color: #f9fafb;
}
</style>